﻿<!DOCTYPE html>
<html ng-app="demoApp" lang="en">
<head>
    <meta name="keywords" content="AngularJS Menu, Main Menu, Context Menu, Vertical Menu, Popup Menu, Menu, jqxMenu" />
    <meta name="description" content="AngularJS Context Menu example." /> 
    <title id='Description'>This demo demonstrates how to use the Angular Menu widget as a Context Menu. In order to display the jqxMenu as Context Menu, you need to set the 'mode' property to 'popup'. 
    </title>
    <link rel="stylesheet" href="../../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../../scripts/angular.min.js"></script> 
    <script type="text/javascript" src="../../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../../../scripts/demos.js"></script>
    <script type="text/javascript" src="../../../jqwidgets/jqxangular.js"></script>

    <script type="text/javascript">
        var demoApp = angular.module("demoApp", ["jqwidgets"]);
        demoApp.directive('contextmenu', function ($document) {
            return {
                link: function (scope) {
                    angular.element($document).on('contextmenu', function (e) {
                        e.preventDefault();
                        return false;
                    });
                }
            }
        });
        demoApp.controller("demoController", function ($scope) {
            var contextMenu = {};
            $scope.contextMenuSettings = {
                width: '120px', height: '140px', autoOpenPopup: false, mode: 'popup',
                created: function (args) {
                    contextMenu = args.instance;
                }
            };
            // open the context menu when the user presses the mouse right button.
            $scope.mouseDown = function (event) {
                var rightClick = isRightClick(event) || $.jqx.mobile.isTouchDevice();
                if (rightClick) {
                    var scrollTop = $(window).scrollTop();
                    var scrollLeft = $(window).scrollLeft();

                    contextMenu.open(parseInt(event.clientX) + 5 + scrollLeft, parseInt(event.clientY) + 5 + scrollTop);
                    return false;
                }
            };

            function isRightClick(event) {
                var rightclick;
                if (!event) var event = window.event;
                if (event.which) rightclick = (event.which == 3);
                else if (event.button) rightclick = (event.button == 2);
                return rightclick;
            }
        });
    </script>
</head>
<body ng-controller="demoController">
    <div style="width: 500px; height: 500px; background: lightGray;" contextmenu ng-mousedown="mouseDown($event)">
        <jqx-menu jqx-settings="contextMenuSettings">
            <ul>
                <li><a href="../#">Home</a></li>
                <li>About Us
                        <ul>
                            <li><a href="../#">History</a></li>
                            <li><a href="../#">Our Vision</a></li>
                            <li><a href="../#">The Team</a>
                                <ul>
                                    <li><a href="../#">Brigita</a></li>
                                    <li><a href="../#">John</a></li>
                                    <li><a href="../#">Michael</a></li>
                                    <li><a href="../#">Peter</a></li>
                                    <li><a href="../#">Sarah</a></li>
                                </ul>
                            </li>
                            <li><a href="../#">Clients</a></li>
                            <li><a href="../#">Testimonials</a></li>
                            <li><a href="../#">Press</a></li>
                            <li><a href="../#">FAQs</a></li>
                        </ul>
                </li>
                <li>Services
                        <ul>
                            <li><a href="../#">Product Development</a></li>
                            <li><a href="../#">Delivery</a></li>
                            <li><a href="../#">Shop Online</a></li>
                            <li><a href="../#">Support</a></li>
                            <li><a href="../#">Training &amp; Consulting</a></li>
                        </ul>
                </li>
                <li>Products
                        <ul>
                            <li><a href="../#">New</a>
                                <ul>
                                    <li><a href="../#">Corporate Use</a></li>
                                    <li><a href="../#">Private Use</a></li>
                                </ul>
                            </li>
                            <li><a href="../#">Used</a>
                                <ul>
                                    <li><a href="../#">Corporate Use</a></li>
                                    <li><a href="../#">Private Use</a></li>
                                </ul>
                            </li>
                            <li><a href="../#">Featured</a></li>
                            <li><a href="../#">Top Rated</a></li>
                            <li><a href="../#">Prices</a></li>
                        </ul>
                </li>
                <li><a href="../#">Contact Us</a>
                    <ul>
                        <li><a href="../#">Enquiry Form</a></li>
                        <li><a href="../#">Map &amp; Driving Directions</a></li>
                        <li><a href="../#">Your Feedback</a></li>
                    </ul>
                </li>
            </ul>
        </jqx-menu>
        <span style='font-size: 14px; position: relative; text-align:center; top: 230px; left:150px; font-family: Verdana Arial;'>Right-Click here to Open the Menu </span>
    </div>
</body>
</html>
